<script>
	export default {
		props: ['parent_data'],
		data() {
			return {
				my_user_info: JSON.parse(sessionStorage.getItem('my_user_info'))
			}
		},
		mounted() {
			console.log(this.my_user_info)
		}
	};
</script>

<template>
	<div class="m-card" id="m-card">
		<header>
			<img class="avatar" width="40" height="40" :alt="my_user_info.userName" :src="my_user_info.iconUrl">
			<p class="name">{{my_user_info.userName}}</p>
		</header>
		<footer>
			<input class="search" type="text" placeholder="search user..." v-model="parent_data.search">
		</footer>
	</div>
</template>

<style lang="less" scoped="scoped">
	#m-card {
		padding: 12px;
		border-bottom: solid 1px #24272C;
		footer {
			margin-top: 10px;
		}
		.avatar,
		.name {
			vertical-align: middle;
		}
		.avatar {
			border-radius: 2px;
			width: 40px;
			height: 40px;
			display: inline-block;
		}
		.name {
			display: inline-block;
			margin: 0 0 0 15px;
			font-size: 16px;
		}
		.search {
			padding: 0 10px;
			width: 100%;
			font-size: 12px;
			color: #fff;
			height: 30px;
			line-height: 30px;
			border: solid 1px #3a3a3a;
			border-radius: 4px;
			outline: none;
			background-color: #26292E;
		}
	}
</style>